<!-- banner -->
<div class="column is-5">
    <div class="good-banner" id="goodbanner">
        <figure class="image is-1by1">
            <img id="MainPicture" src="{{ MEDIA_URL }}{{ product.image }}" alt="{{ product.title }}">
        </figure>
        <div class="mt-1 good-images">
            <div id="left">
                <span class="icon is-size-1 has-text-white is-family-code">
                    <i class="mdi mdi-chevron-left"></i>
                </span>
            </div>
            <div id="right">
                <span class="icon is-size-1 has-text-white is-family-code" style="font-weight: normal;">
                    <i class="mdi mdi-chevron-right"></i>
                </span>
            </div>
            <ul id="GoodsBanners">
                
                {% if sku %}
                <li class="mr-1">
                    <img src="{{ MEDIA_URL }}{{ sku.image }}" alt="{{ product.title }}">
                </li>
                {% else %}
                <li class="mr-1">
                    <img src="{{ MEDIA_URL }}{{ product.image }}" alt="{{ product.title }}">
                </li>
                {% endif %}
                {% for img in product.images.all %}
                <li class="mr-1">
                    <img id="goodImg" src="{{ MEDIA_URL }}{{ img.image }}" alt="{{ product.title }}" srcset="">
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div id="product-fav" v-cloak class="mt-3">
        <a class=" button is-danger is-outlined is-small" @click="addfav">
            <span class="icon"><i class="mdi mdi-star-settings-outline"></i></span>
            <span>[[ text ]]</span>
        </a>
    </div>  
</div>
<!-- banner end-->